<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析室监控列表</title>
    <link rel="stylesheet" href="css/first.css">
    <link rel="stylesheet" href="css/slider.css">
    <link rel="stylesheet" href="css/Eject.css">
    <link rel="stylesheet" href="css/mouseEvent.css">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery-magnet.min.js"></script>
    <script src="js/mock.js"></script>
    <script src="js/dialog.js"></script>
</head>
<body>
<div class="container">
    <div class="title">
        <img class="title-img" src="img/room.png">
        <div class="room">分析室监控详情</div>
        <div class="deviceNum"></div>
    </div>
    <div id="tool">
        <div class="scale toolBtn" style="margin-right: 20px;padding: 0 10px"></div>
        <div class="control">

            <img src="img/big.png" alt="放大" class="control-img" onclick="amplify(1)">
            <span class="control-line">|</span>
            <img src="img/lite.png" alt="缩小" class="control-img" onclick="amplify(2)">
        </div>
        <button class="toolBtn" onclick="getTableData()">保存</button>

    </div>
    <div class="main">
        <div class="content">
            <div id="parent">
                <div id="lines">
                    <span class="vert"></span>
                    <span class="hori"></span>
                </div>
                <div id="paper">
                    <div id="canvasBox"></div>
                    <div class="pop pop-tips" style="display: none">
                        <div class="row">
                            本地ip: <span class="ip"></span>
                        </div>
                        <div class="row">
                            cpu利用率: <span class="cpu"></span>
                        </div>
                        <div class="row">
                            内存总量: <span class="memory"></span>
                        </div>
                        <div class="row">
                            当前使用量: <span class="memory_use"></span>
                        </div>
                        <div class="row">
                            硬盘总大小: <span class="disk"></span>
                        </div>
                        <div class="row">
                            当前使用量: <span class="disk_use"></span>
                        </div>
                        <div class="row">
                            当前剩余量: <span class="diskTotalFree"></span>
                        </div>
                        <div class="row">
                            接受的总字节数: <span class="accept"></span>
                        </div>
                        <div class="row">
                            发送的总字节数: <span class="send"></span>
                        </div>
                        <div class="row">
                            当前用户: <span class="user"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mouseEvent-group">
                <div class="m_title">鼠标右击事件</div>
                <div class="m_content">
                    <div id="groupAdd" class="m_item">新建</div>
                    <div id="groupEdit" class="m_item">修改</div>
                    <div id="groupDel" class="m_item">删除</div>
                    <div id="groupDetail" class="m_item">详情</div>
                </div>
            </div>
        </div>
        <div class="slider">
            <div class="tag">
                <img class="icon" src="img/left.png"/>
                <div class="text">打开弹窗</div>
            </div>
            <div class="content2">
                <ul class="tab">
                    <li class="tab-item active">设备</li>
                </ul>
                <div class="products">
                    <div class="m_content selected">
                        <div class="deviceBox">
                            <!--                                            <div class="item" data-parent>-->
                            <!--                                                <div class="imgbox" data-id="105685"><img class="imgbox-img"-->
                            <!--                                                                                          src="img/off.png"-->
                            <!--                                                                                          alt="">-->
                            <!--                                                    <div class="status off">-->
                            <!--                                                        <div class="circle"></div>-->
                            <!--                                                        已关机-->
                            <!--                                                    </div>-->
                            <!--                                                </div>-->
                            <!--                                                <div class="list_name" data-id="105685">105685</div>-->
                            <!--                                            </div>-->
                        </div>
                        <div class="mouseEvent-device">
                            <div class="m_title">鼠标右击事件</div>
                            <div class="m_content">
                                <div id="deviceAdd" class="m_item">新建</div>
                                <div id="deviceEdit" class="m_item">修改</div>
                                <div id="deviceDel" class="m_item">删除</div>
                                <div id="deviceDetail" class="m_item">详情</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/transform.js"></script>
<script src="js/slider.js"></script>
<script>
    var currentGroup = null;
    $('.mouseEvent-group').hide()
    //主界面 增加右键默认事件 移除
    $(".main ").bind("contextmenu", function () {
        return false;
    })
    //主界面 增加右键自定义事件
    $('.main ').on('mousedown', function (e) {

        //鼠标左击  e.which == 1
        if (e.which == 3) {
            console.log('主界面右击事件触发')
            if (e.target.id == 'canvasBox') {
                console.log('触发空处点击事件')
                //空白处点击右键
                $('.mouseEvent-group').css({'top': (e.clientY - 40) / scale + 'px', 'left': e.clientX / scale + 'px'})
                $('.mouseEvent-group .m_content >div').attr("class", "m_item");
                $('.mouseEvent-group .m_content >div').show();
                $('.mouseEvent-group .m_content :not(:first)').hide();
                $('.mouseEvent-group').show()
                $('.mouseEvent-device').hide()
            } else if (e.target.className == 'deviceBox') {
                console.log('触发主界面事件，其实为设备块右键')
                // 默认关闭主界面的右键弹窗事件
                $('.mouseEvent-group').hide()
                return false
            } else {
                //分组点击右键
                currentGroup = e.target.childNodes[1].dataset.action
                $('.mouseEvent-group').css({'top': (e.clientY - 40) / scale + 'px', 'left': e.clientX / scale + 'px'})
                $('.mouseEvent-group .m_content >div').attr("class", "m_item");
                $('.mouseEvent-group .m_content >div').show();
                $('.mouseEvent-group .m_content :first').attr("class", "m_item_disable");
                $('.mouseEvent-group .m_content :first').hide();
                $('.mouseEvent-group').show()
            }

        }
        if (e.which == 1) {
            console.log('主界面左击事件触发', e)
            $('.mouseEvent-group').hide()
            $('.mouseEvent-device').hide()

            //根据点击的dom id 做不同的动作
            switch (e.target.id) {
                case 'groupAdd':
                    group_Add()
                    break;
                case 'groupEdit':
                    group_Edit(currentGroup)
                    break;
                case 'groupDel':
                    tableDel(currentGroup)
                    break;
                case 'groupDetail':
                    group_Detail(currentGroup)
                    break;

                // case 'groupAdd':
                //     break;
                // case 'groupAdd':
                //     break;
            }
            if (e.target.id == 'canvasBox') {
            }
        }
    })

    //当前选中的设别
    var currentDevice = null;
    $('.mouseEvent-device').hide()
    //抽屉界面 右键默认事件移除
    $(".slider .m_content ").bind("contextmenu", function () {
        return false;
    })
    //抽屉界面 增加右键自定义事件
    $('.slider .m_content ').on('mousedown', function (e) {

        //鼠标左击  e.which == 1
        if (e.which == 3) {
            console.log('抽屉界面右击事件触发', e)
            if (e.target.className == 'deviceBox') {
                //空白处点击右键
                $('.mouseEvent-device').css({'left': e.offsetX + 6 + 'px', 'top': e.offsetY + 42 + 'px'})
                $('.mouseEvent-device .m_content >div').attr("class", "m_item");
                $('.mouseEvent-device .m_content >div').show();
                $('.mouseEvent-device .m_content :not(:first)').hide();
                $('.mouseEvent-device').show()
            } else {
                //分组点击右键
                //设备上的右键 触发事件在下面
            }

        }
        if (e.which == 1) {
            e.stopPropagation();//表示阻止向父元素冒泡
            console.log('抽屉界面左击事件触发', e)
            $('.mouseEvent-device').hide()
            $('.mouseEvent-group').hide()
            //根据点击的dom id 做不同的动作
            switch (e.target.id) {
                case 'deviceAdd':
                    device_Add()
                    break;
                case 'deviceEdit':
                    device_Edit(currentDevice)
                    break;
                case 'deviceDel':
                    device_Del(currentDevice)
                    break;
                case 'deviceDetail':
                    device_Detail(currentDevice)
                    break;

                // case 'groupAdd':
                //     break;
                // case 'groupAdd':
                //     break;
            }

        }
    })


</script>
<script>

    (($) => {
        var myTiming;//鼠标悬浮出弹窗 页面定时器
        const itemBox = {
            width: 130,
            height: 130
        };//定义设备模块大小
        const $window = $(window);
        const $magnet = $.magnet({
            distance: 10,//吸附距离初始值
            stayInParent: false,//固定画布初始值
            alignOuter: true,//外部对其初始值
            alignInner: false,//内部对齐初始值
            alignParentCenter: false,//盒子父级居中对齐
            alignCenter: false,//父级居中对齐
        });

        $window.on('load', () => {
            //页面初始化 设备数据
            // $.ajax({
            //     url: `${ctx}/analysisMonitor/terminalAnalysisRoomInfo/byAnalysisId?roomid=${analysisRoomInfo.id}`,//要请求的服务器url
            //     async: true,//是否是异步请求
            //     cache: true,//是否缓存结果
            //     type: "GET",//请求方式
            //     dataType: "json",//服务器返回什么类型数据 text xml javascript json(javascript对象)
            //     success: function (result) {//函数会在服务器执行成功后执行，result就是服务器返回结果
            //见下面的代码块

            setTimeout(() => {
                //todo 创建页面 设备
                if (result.code == '0') {
                    console.log('获取分析师设备信息成功', result)
                    let positionInfo = JSON.parse(result.data.location);
                    let totalList = result.data.totalList ? result.data.totalList : [];
                    $('.deviceNum').text(totalList.length + '/台')
                    for (let i = 0; i < positionInfo.length; i++) {
                        positionInfo[i].isShow = true
                        for (let j = 0; j < positionInfo[i].childList.length; j++) {
                            for (let z = 0; z < totalList.length; z++) {
                                if (positionInfo[i].childList[j].objData.id == totalList[z].id) {
                                    positionInfo[i].childList[j].objData = {...positionInfo[i].childList[j].objData, ...totalList[z]}
                                }
                            }
                        }
                    }
                    console.log('整合后的数据=', positionInfo)
                    let nowTableList = []; //暂存列表数据
                    for (let i = 0; i < positionInfo.length; i++) {
                        addBox(positionInfo[i])
                        //把 桌面设备 放到 暂存列表数据
                        nowTableList.push(positionInfo[i])
                    }
                    //把 桌面设备 放到 列表中
                    tableObj.str = tableObj.str ? JSON.stringify(JSON.parse(tableObj.str).concat(nowTableList)) : JSON.stringify(nowTableList)
                    addFun()


                }
            }, 200)


            //     }
            // })
            const $canvasBox = $('.main #canvasBox');
            const $mask = $('#lines');
            const $horiMagnet = $mask.find('.hori');
            const $vertMagnet = $mask.find('.vert');

            $magnet
                .on('start change end', ({type}) => {
                    console.log(`magnet${type}`);
                })
                .on('end', () => {
                    $horiMagnet.removeClass('show');
                    $vertMagnet.removeClass('show');
                })
                .on('change', (e) => {
                    // show/hide horizon/vertical edge line
                    let result = e.detail;
                    let resultX = result.x;
                    let resultY = result.y;
                    if (resultX) {
                        $vertMagnet.css('left', (resultX.position + 'px'));
                        $vertMagnet.addClass('show');
                    } else {
                        $vertMagnet.removeClass('show');
                    }
                    if (resultY) {
                        $horiMagnet.css('top', (resultY.position + 'px'));
                        $horiMagnet.addClass('show');
                    } else {
                        $horiMagnet.removeClass('show');
                    }
                });


            //初始化设备
            // (function addEle() {
            //     console.log('数据=', deviceJson)
            //     for (let i = 0; i < deviceJson.length; i++) {
            //         addBox(deviceJson[i])
            //     }
            //     addFun()
            // })()

            //创建box
            var addBox = function (option) {
                const {row, column, childList, name, left, top} = option;
                const rootWidth = $window.width();
                const rootHeight = $window.height();

                const width = (itemBox.width) / scale * column + column * 10; //盒子宽
                const height = (itemBox.height) / scale * row + row * 10 + 20; //盒子高
                //监听dom变化  创建一个链接到回调函数的观察者实例
                var observer = new MutationObserver(function (mutationsList) {
                    mutationsList.forEach(function (item, index) {
                        if (item.type == 'attributes') {
                            if ($(item.target)[0].style.width != width + 'px') {
                                $(item.target)[0].style.width = width + 'px'
                                $(item.target)[0].style.height = Number(height + 10) + 'px'
                            }
                        }
                    });
                })

                //创建 checkbox
                var inset = ''
                const $checkbox = $('<input>')
                    .attr('type', 'checkbox')
                    .prop('checked', false)
                    .on('mousedown touchstart', (evt) => evt.stopPropagation())
                    .on('change', function (e) {
                        if (this.checked) {
                            console.log('兄弟选择器', $(this).next()[0].dataset, 'inset=', inset)
                            let data = $(this).next()[0].dataset
                            inset = inset != '' ? inset : data.top + 'px auto auto ' + data.left + 'px'
                            console.log('inset=', inset)
                            let block = this.parentElement;
                            $(this).next().css({"pointer-events": "none"});
                            $magnet.add(block);
                            $(block)[0].style.width = width + 'px'
                            $(block)[0].style.height = Number(height + 10) + 'px'
                            $(block)[0].style.inset = inset
                        } else {
                            console.log('兄弟选择器', this.parentNode.style.inset)
                            inset = this.parentNode.style.inset
                            let block = this.parentNode;
                            block.style.resize = 'none';//设定用户可调整元素的高度和宽度。
                            $magnet.remove(block);
                            // $(block)[0].style.width = width+'px'
                            // $(block)[0].style.height = Number(height + 10)+'px'
                            $(block)[0].style.inset = inset
                            $(this).next().css({"pointer-events": "auto"});
                            observer.disconnect();
                        }
                    });
                const $block = $('<span>')
                    .css({
                        width: width + 'px',
                        height: Number(height + 10) + `px`,
                        left: left + `px`,
                        top: top + `px`,
                        backgroundColor: `rgba(0, 0, 0, .1)`,
                    })
                    .addClass('block')
                    .on('mousedown', function (e) {
                        this.style.width = width + 'px'
                        this.style.height = Number(height + 10) + 'px'
                        this.style.zIndex = 10;
                        // 开始观察已配置突变的目标节点
                        observer.observe(this, {attributes: true, childList: false, subtree: false});
                    })
                    .on('mouseup', function (e) {
                        observer.disconnect();
                        this.style.width = width + 'px'
                        this.style.height = Number(height + 10) + 'px'
                        this.style.zIndex = 1;
                    })
                    .on('click', function () {
                        $(this).parent().append(this);
                        this.style.zIndex = 1;
                        this.style.width = width + 'px'
                        this.style.height = Number(height + 10) + 'px'
                    })
                    .on('attract unattract attracted unattracted', function (e) {
                        console.log(e.type, e);
                        this.style.width = width + 'px'
                        this.style.height = Number(height + 10) + 'px'
                    })
                    .append($checkbox)
                    .appendTo($canvasBox);

                let parentLength = $("div[class='parent']").length;//当前页面 有几个 parent
                var $parent = $('<div class="parent" data-action="' + name + '"data-top="' + top + '"data-left="' + left + '" data-row="' + row + '" data-column="' + column + '" style="width: ' + Number(column * itemBox.width + column * 10) + 'px;margin-top: 30px;"></div>')
                let A_Z = 'ABCDEFGHIJKLMNOPKRSTUVWXYZ'
                let a_z = 'abcdefghijklmnopkrstuvwxyz'
                for (let i = 0; i < childList.length; i++) {
                    let seachImg = childList[i].objData.id != '' ? childList[i]['objData']['status'] == 1 ? `img/on.png` : `img/off.png` : `img/isnull.png`
                    let onAndOff = childList[i].objData.id != '' ? childList[i]['objData']['status'] == 1 ? 'on' : 'off' : 'isnull'
                    let isRun = childList[i].objData.id != '' ? childList[i]['objData']['status'] == '1' ? '运行中' : '已关机' : '待添加'
                    let id = childList[i].objData.id != '' ? childList[i].objData.id : ''
                    let objname = childList[i].objData.id != '' ? childList[i].objData.name : '- -'
                    let item1 = `<div class="imgbox" data-id="` + id + `">` +
                        `<img class="imgbox-img" src="` + seachImg + `" alt="" >` +
                        ` <div class="status ` + onAndOff + `"><div class="circle"></div>` + isRun + `</div></div>` +
                        `<div class="list_name" data-id="` + id + `">` + objname + `</div> </div>`
                    let haveDom = childList[i].objData ? item1 : ''
                    let str = `<div class="item" data-parent="` + name + `" data-position="` + childList[i].position + `">` + haveDom + `</div>`
                    let $item = $(str)
                    //添加element

                    $parent.append($item)
                }
                $block.append($parent)
                return $block;
            }

            var Astop = true;
            var Parent = '', toParent = '';

            //添加 设备 拖拽事件
            function addFun() {

                var a_b = false, b_a = false, a_a = false, b_b = false;//定义两个 模块的 插入关系
                let parentName = '';//用于判断 当前准备拖拽的是哪个 dom的  设备块
                $(".main  .item").bind("contextmenu", function () {
                    return false;
                })
                $('.main  .item').on('mousedown', function (e) {
                    console.log('点击itemle',e.target.parentNode.className)
                    if (Astop && e.which == 1) {
                            if(e.target.parentNode.className == 'deviceBox'){
                                parentName = 'deviceBox'
                            }else {
                                parentName = 'parent'
                            }
                            if (e.offsetX <= 20 || e.offsetY <= 20) return //防止误操作 故改为距离边框 4 才可进行拖拽操作
                            Parent = $(this)[0].dataset.parent //当前要替换的dom 的 父ID
                            Astop = false;
                            let that = this;
                            let disx = e.offsetX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
                            let disy = e.offsetY;
                            let disx2 = e.clientX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
                            let disy2 = e.clientY;
                            /*获取当前拖拽的dom的页面位置 begin*/
                            let thatGrandPosition = $(that).parent().parent().position()
                            let thatPosition = $(that).position()
                            let animatePosition = {
                                top: parentName == 'parent'?(thatGrandPosition.top + thatPosition.top) / scale :(e.clientY - e.offsetY) / scale ,
                                left:parentName == 'parent'? (thatGrandPosition.left + thatPosition.left) / scale : (e.clientX - e.offsetX) / scale,
                            }
                            console.log('克隆的互换位置', animatePosition)
                            /*获取当前拖拽的dom的页面位置 end*/
                            let $clone = $(this).clone(); //克隆
                            console.log('克隆的块位置', (e.clientX - e.offsetX) / scale, (e.clientY - e.offsetY) / scale)
                            $clone.addClass('draging').css({
                                top: (e.clientY - e.offsetY) / scale,
                                left: (e.clientX - e.offsetX) / scale,
                            });
                            console.log('克隆的dom=', $clone)
                            $('.main ').append($clone); //追加到box里面
                            $(this).addClass('moving').html(''); //被克隆的元素添加类移除内容
                            $('.main ').on('mousemove', function (e) { //对克隆的盒子进行拖拽
                                $clone.css({
                                    left: (e.pageX - $(this).offset().left) / scale - disx,
                                    top: (e.pageY - $(this).offset().top) / scale - disy
                                })
                                clearTimeout(myTiming);//清除显示定时器
                            });

                            $clone.on('mouseup', function () {
                                    $('.main ').off('mousemove'); //取消mousemove事件
                                    let minValue = 1000; //初始化最小值，用来存储所有盒子的最小值
                                    let minObj;
                                    let grandPosition, thisPosition;
                                    $('.main  .item').not(':last').each(function () { //不包括克隆的那个盒子
                                        //适配设备在右侧弹窗中
                                        if (this.parentNode.className == 'deviceBox') {
                                            //当前元素的 父父父父父  元素的位置，就是最外层元素的位置
                                            let relativeLeft = this.parentNode.parentNode.parentNode.parentNode.parentNode.offsetLeft
                                            let relativeTop = this.parentNode.parentNode.parentNode.parentNode.parentNode.offsetTop
                                            grandPosition = {
                                                left: $(this).parent().parent().position().left + relativeLeft,
                                                top: $(this).parent().parent().position().top + relativeTop
                                            }
                                            thisPosition = {
                                                left: $(this).position().left,
                                                top: $(this).position().top
                                            }
                                        } else {
                                            grandPosition = $(this).parent().parent().position()
                                            thisPosition = $(this).position()
                                        }
                                        console.log('grandPosition,thisPosition',grandPosition,thisPosition)
                                        let smalldistance = Math.sqrt(Math.pow($clone.position().left - thisPosition.left - grandPosition.left, 2) + Math.pow($clone.position().top - thisPosition.top - grandPosition.top, 2)); //利用勾股定理获取每一个盒子离克隆出来的盒子的距离
                                        if (smalldistance < minValue) { //比较
                                            minValue = smalldistance; //获取最小值
                                            minObj = {
                                                dom: $(this),
                                                position: {
                                                    left: (thisPosition.left + grandPosition.left) / scale,
                                                    top: (thisPosition.top + grandPosition.top) / scale,
                                                }
                                            } //距离最短的dom + 定位
                                        }
                                    });
                                    let minData = minObj.dom[0].dataset;//获取距离最短的dom标识
                                    let nowData = $(that)[0].dataset;//获取要拖拽的标识

                                    if ((minData.parent == nowData.parent) && (minData.position == nowData.position)) { //如果当前最小距离的那个盒子和拖拽的盒子索引相等的话，归位。

                                        $clone.animate(parentName=='parent'?$(that).position():grandPosition, 400, function () {
                                            $(that).removeClass('moving').html($clone.html()); //恢复被克隆盒子的相关样式
                                            $(this).remove(); //移除被克隆的盒子
                                            Astop = true;
                                        });
                                    } else {
                                        console.log('如果当前最小距离的那个盒子和拖拽的盒子索引相等的话，归位。',$(that).position())
                                        console.log('grandPosition,thisPosition',grandPosition,thisPosition)
                                        console.log('查看当前点击的时 主界面 还是 抽屉 ',parentName)
                                        toParent = minData.parent;//要跳到的div 标识，判断是否是相同div内拖拽
                                        let $minbox = minObj.dom; //最小索引的盒子
                                        let $clone2 = $minbox.clone(); //克隆一个最小盒子的副本，添加相关样式
                                        $clone2.addClass('draging').css({
                                            left: minObj.position.left,
                                            top: minObj.position.top
                                        })
                                        $('.main ').append($clone2); //追加
                                        $minbox.addClass('moving').html('');
                                        $clone.animate(minObj.position, 400, function () { //克隆的内容运动到最小索引的盒子的位置
                                            $minbox.removeClass('moving').html($clone.html()); //移除相关样式，添加内容
                                            $clone.remove(); //移除克隆的盒子
                                            Astop = true;
                                        });
                                        $clone2.animate(animatePosition, 400, function () {
                                                $(that).removeClass('moving').html($clone2.html());
                                                $clone2.remove();
                                                Astop = true;
                                            }
                                        );
                                    }
                                }
                            )
                            ;
                        }
                    if (e.which == 3) {
                        console.log('点击右键',e.target.offsetParent.className)
                        //判断当前点击的item 不等于 block时 触发右键事件,
                        if(e.target.offsetParent.className != 'block'){
                            //分组点击右键
                            currentDevice = e.target.childNodes[0].dataset.id
                            $('.mouseEvent-device').css({'left': e.offsetX + 6 + 'px', 'top': e.offsetY + 42 + 'px'})
                            $('.mouseEvent-device .m_content >div').attr("class", "m_item");
                            $('.mouseEvent-device .m_content >div').show();
                            $('.mouseEvent-device .m_content :first').attr("class", "m_item_disable");
                            $('.mouseEvent-device .m_content :first').hide();
                            $('.mouseEvent-device').show()
                        }
                    }
                        return false;
                    }
                )
                ;
                //鼠标悬浮2秒触发弹窗显示
                $(".main .item").mouseover(function (e) {
                    let left = $(this).offset().left / scale;
                    let top = $(this).offset().top / scale;
                    $(this).addClass('hoverItem')
                    if ($(this)[0].children.length > 0) {
                        let id = $(this)[0].children[0].dataset.id
                        myTiming = setTimeout(function () {
                            //获取 设备信息
                            getTerminalDetailInfoById(id, left, top)

                        }, 1000);
                    }
                });
                $(".main .item").mouseout(function () {
                    $(this).removeClass('hoverItem')
                    clearTimeout(myTiming);
                    $('.pop').css('display', 'none')
                });
            }

            //添加 右侧弹窗 设备拖拽事件
            //添加 设备 拖拽事件
            function addFun_right() {
                console.log('添加 右侧弹窗 设备拖拽事件')
                var a_b = false, b_a = false, a_a = false, b_b = false;//定义两个 模块的 插入关系
                $(".main .deviceBox .item").bind("contextmenu", function () {
                    return false;
                })
                $('.main .deviceBox .item').on('mousedown', function (e) {
                        console.log('触发鼠标事件', e)
                        //鼠标左击  e.which == 1
                        if (Astop && e.which == 1) {
                            if (e.offsetX <= 20 || e.offsetY <= 20) return //防止误操作 故改为距离边框 4 才可进行拖拽操作
                            Parent = $(this)[0].dataset.parent //当前要替换的dom 的 父ID
                            Astop = false;
                            let that = this;
                            let disx = e.offsetX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
                            let disy = e.offsetY;
                            let disx2 = e.clientX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
                            let disy2 = e.clientY;
                            /*获取当前拖拽的dom的页面位置 begin*/
                            let thatGrandPosition = $(that).parent().parent().position()
                            let thatPosition = $(that).position()
                            let animatePosition = {
                                top: (thatGrandPosition.top + thatPosition.top) / scale,
                                left: (thatGrandPosition.left + thatPosition.left) / scale,
                            }
                            console.log('克隆的互换位置', animatePosition)
                            /*获取当前拖拽的dom的页面位置 end*/
                            let $clone = $(this).clone(); //克隆
                            console.log('克隆的块位置', (e.clientX - e.offsetX) / scale, (e.clientY - e.offsetY) / scale)
                            $clone.addClass('draging').css(animatePosition);
                            $('.main .deviceBox').append($clone); //追加到box里面
                            $(this).addClass('moving').html(''); //被克隆的元素添加类移除内容
                            $('.main .deviceBox').on('mousemove', function (e) { //对克隆的盒子进行拖拽
                                $clone.css({
                                    left: (e.pageX - $(this).offset().left) / scale - disx,
                                    top: (e.pageY - $(this).offset().top) / scale - disy
                                })
                                clearTimeout(myTiming);//清除显示定时器
                            });

                            $clone.on('mouseup', function () {
                                    $('.main .deviceBox').off('mousemove'); //取消mousemove事件
                                    let minValue = 1000; //初始化最小值，用来存储所有盒子的最小值
                                    let minObj;

                                    $('.main .deviceBox .item').not(':last').each(function () { //不包括克隆的那个盒子
                                        let grandPosition = $(this).parent().parent().position()
                                        let thisPosition = $(this).position()
                                        let smalldistance = Math.sqrt(Math.pow($clone.position().left - thisPosition.left - grandPosition.left, 2) + Math.pow($clone.position().top - thisPosition.top - grandPosition.top, 2)); //利用勾股定理获取每一个盒子离克隆出来的盒子的距离
                                        if (smalldistance < minValue) { //比较
                                            minValue = smalldistance; //获取最小值
                                            minObj = {
                                                dom: $(this),
                                                position: {
                                                    left: (thisPosition.left + grandPosition.left) / scale,
                                                    top: (thisPosition.top + grandPosition.top) / scale,
                                                }
                                            } //距离最短的dom + 定位
                                        }
                                    });
                                    let minData = minObj.dom[0].dataset;//获取距离最短的dom标识
                                    let nowData = $(that)[0].dataset;//获取要拖拽的标识

                                    if ((minData.parent == nowData.parent) && (minData.position == nowData.position)) { //如果当前最小距离的那个盒子和拖拽的盒子索引相等的话，归位。
                                        $clone.animate($(that).position(), 400, function () {
                                            $(that).removeClass('moving').html($clone.html()); //恢复被克隆盒子的相关样式
                                            $(this).remove(); //移除被克隆的盒子
                                            Astop = true;
                                        });
                                    } else {
                                        toParent = minData.parent;//要跳到的div 标识，判断是否是相同div内拖拽
                                        let $minbox = minObj.dom; //最小索引的盒子
                                        let $clone2 = $minbox.clone(); //克隆一个最小盒子的副本，添加相关样式
                                        $clone2.addClass('draging').css({
                                            left: minObj.position.left,
                                            top: minObj.position.top
                                        })
                                        $('.main .deviceBox').append($clone2); //追加
                                        $minbox.addClass('moving').html('');
                                        $clone.animate(minObj.position, 400, function () { //克隆的内容运动到最小索引的盒子的位置
                                            $minbox.removeClass('moving').html($clone.html()); //移除相关样式，添加内容
                                            $clone.remove(); //移除克隆的盒子
                                            Astop = true;
                                        });
                                        $clone2.animate(animatePosition, 400, function () {
                                                $(that).removeClass('moving').html($clone2.html());
                                                $clone2.remove();
                                                Astop = true;
                                            }
                                        );
                                    }
                                }
                            )
                            ;
                        }
                        if (e.which == 3) {
                            console.log('点击右键')
                            //分组点击右键
                            currentDevice = e.target.childNodes[0].dataset.id
                            $('.mouseEvent-device').css({'left': e.offsetX + 6 + 'px', 'top': e.offsetY + 42 + 'px'})
                            $('.mouseEvent-device .m_content >div').attr("class", "m_item");
                            $('.mouseEvent-device .m_content >div').show();
                            $('.mouseEvent-device .m_content :first').attr("class", "m_item_disable");
                            $('.mouseEvent-device .m_content :first').hide();
                            $('.mouseEvent-device').show()
                        }
                        return false;
                    }
                )
                ;
                //鼠标悬浮2秒触发弹窗显示
                $(".deviceBox .item").mouseover(function (e) {
                    let left = $(this).offset().left / scale;
                    let top = $(this).offset().top / scale;
                    $(this).addClass('hoverItem')
                    if ($(this)[0].children.length > 0) {
                        let id = $(this)[0].children[0].dataset.id
                        myTiming = setTimeout(function () {
                            //获取 设备信息
                            getTerminalDetailInfoById(id, left, top)

                        }, 1000);
                    }
                });
                $(".item").mouseout(function () {
                    $(this).removeClass('hoverItem')
                    clearTimeout(myTiming);
                    $('.pop').css('display', 'none')
                });
            }

            //获取设备信息
            getTerminalDetailInfoById = function (id, left, top) {
                // $.ajax({
                //     url: `${ctx}/analysisMonitor/terminalAnalysisRoomInfo/getTerminalDetailInfoById?terminalId=` + id,//要请求的服务器url
                //     async: true,//是否是异步请求
                //     cache: true,
                //     type: "GET",//请求方式
                //     dataType: "json",//服务器返回什么类型数据 text xml javascript json(javascript对象)
                //     success: function (result) {//函数会在服务器执行成功后执行，result就是服务器返回结果
                setTimeout(() => {
                    if (result2.code == '0') {
                        console.log('获取设备信息成功', result2)
                        popData.ip = result2.data.totalList.localIp
                        popData.memory = result2.data.totalList.memoryTotal
                        popData.memory_use = result2.data.totalList.memoryUsage
                        popData.disk = result2.data.totalList.diskTotal
                        popData.disk_use = result2.data.totalList.diskTotalUsed
                        popData.accept = result2.data.totalList.acceptTotalByte
                        popData.send = result2.data.totalList.sendTotalByte
                        popData.user = result2.data.totalList.issuere
                        popData.cpu = result2.data.totalList.cpuUseRatio
                        popData.diskTotalFree = result2.data.totalList.diskTotalFree
                        $('.pop').css({
                            display: 'block',
                            left: left + itemBox.width + 10 + 'px',
                            top: top + 'px',
                            zIndex: 99
                        })
                    }
                }, 200)
                //     }
                // })
            }

            getTableData = function () {
                let nowDeviceJson = []
                //1.获取页面 class='parant',判断有几个分组
                let $parent = $('.main #canvasBox .parent')

                //2.获取页面 class='item'
                let $item = $('.main #canvasBox .item')

                for (let i = 0; i < $parent.length; i++) {
                    let obj = {
                        name: $($parent[i]).data('action'),
                        row: $($parent[i]).data('row'),
                        column: $($parent[i]).data('column'),
                        left: $($parent[i]).parent().position().left,
                        top: $($parent[i]).parent().position().top,
                        zIndex: 1,
                        childList: []
                    }
                    for (let j = 0; j < $item.length; j++) {
                        //根据 data-parent 分别赋值给不同的组
                        if ($($item[j]).data('parent') == obj.name) {
                            let children = $($item[j])[0].children
                            obj.childList.push({
                                position: $($item[j]).data('position'),
                                objData: children.length > 0 ? {
                                    id: children[0].dataset.id,
                                    name: $($($item[j])[0].children[0]).text(),
                                    status: $($($item[j])[0].children[2]).text() == '运行中' ? 1 : 0
                                } : {}
                            })
                        }
                    }
                    nowDeviceJson.push(obj)
                }
                console.log('页面现有表格数据', nowDeviceJson)

                let JsonStr = JSON.stringify(nowDeviceJson)
                console.log('页面现有表格数据 转 json 字符换', JsonStr)
                let formData = new
                    //上传定位信息
                    $.ajax({
                        url: `${ctx}/analysisMonitor/terminalAnalysisRoomInfo/saveLocation`,//要请求的服务器url
                        async: true,//是否是异步请求
                        cache: true,
                        data: {'id': '${analysisRoomInfo.id}', 'location': JsonStr},
                        type: "POST",//请求方式
                        dataType: "json",//服务器返回什么类型数据 text xml javascript json(javascript对象)
                        success: function (result) {//函数会在服务器执行成功后执行，result就是服务器返回结果
                            //见下面的代码块
                            //todo 创建页面 设备
                            if (result.code == '0') {
                                console.log('上传定位信息成功', result)
                                alert('保存数据成功')
                            }

                        }
                    })
            }

            //页面弹窗数据绑定
            var popData = {
                ip: '',
                memory: '',
                memory_use: '',
                disk: '',
                disk_use: '',
                accept: '',
                send: '',
                user: '',
                cpu: '',
                diskTotalFree: ''
            }
            Object.defineProperty(popData, 'ip', {
                set: function (val) {
                    $('.ip').text(val)
                },
            })
            Object.defineProperty(popData, 'memory', {
                set: function (val) {
                    $('.memory').text(val)
                },
            })
            Object.defineProperty(popData, 'memory_use', {
                set: function (val) {
                    $('.memory_use').text(val)
                },
            })
            Object.defineProperty(popData, 'disk', {
                set: function (val) {
                    $('.disk').text(val)
                },
            })
            Object.defineProperty(popData, 'disk_use', {
                set: function (val) {
                    $('.disk_use').text(val)
                },
            })
            Object.defineProperty(popData, 'accept', {
                set: function (val) {
                    $('.accept').text(val)
                },
            })
            Object.defineProperty(popData, 'send', {
                set: function (val) {
                    $('.send').text(val)
                },
            })
            Object.defineProperty(popData, 'user', {
                set: function (val) {
                    $('.user').text(val)
                },
            })
            Object.defineProperty(popData, 'cpu', {
                set: function (val) {
                    $('.cpu').text(val)
                },
            })
            Object.defineProperty(popData, 'diskTotalFree', {
                set: function (val) {
                    $('.diskTotalFree').text(val)
                },
            })
            //整合右侧弹窗函数放进来 ，否则无法调用相关函数
            //主界面点击删除  需要判断 有无 设备，有设备转到设备分栏，无设备直接清除
            tableDel = function (name) {
                console.log('列表点击删除name=', name)
                let domList = $('.block .parent')
                let element;
                for (let i = 0; i < domList.length; i++) {
                    if (domList[i].dataset.action == name) {
                        console.log('当前符合的数据=', $(domList[i].parentNode))
                        element = domList[i]
                    }
                }
                //查看有无包含设备
                let include = groupIncludeDevice($(element))
                if (include) {
                    console.log('查看有包含设备')
                    Ealt.Ealert({
                        title: '删除分组提示',
                        message: '分组有包含设备，请先移除设备'
                    })
                } else {
                    console.log('查看无包含设备')
                    let domList = $('.block .parent')
                    for (let i = 0; i < domList.length; i++) {
                        if (domList[i].dataset.action == name) {
                            console.log('当前符合的数据=', $(domList[i].parentNode))
                            $(domList[i].parentNode).remove()
                            Ealt.Ealert({
                                title: '删除分组提示',
                                message: '分组删除成功'
                            })
                        }
                    }
                }

            }
            //查看当前分组 是否有设备
            groupIncludeDevice = function (element) {
                console.log(element)
                let nowElement = element[0].childNodes
                var include = false
                for (let i = 0; i < nowElement.length; i++) {
                    if (nowElement[i].childNodes[0].dataset.id != '') {
                        include = true
                    }
                }
                return include
            }
            //删除table条目  || 下画布  把内部元素转到 设备栏目中 nowElement
            tableDelAndDownChange = function (element) {
                console.log('删除table条目  || 下画布', element)
                let nowElement = element[0].childNodes
                var objData = []
                for (let i = 0; i < nowElement.length; i++) {
                    if (nowElement[i].childNodes[0].dataset.id != '') {
                        objData.push({
                            id: nowElement[i].childNodes[0].dataset.id,
                            status: $(nowElement[i].childNodes[0].childNodes[2])[0].classList[1] == 'on' ? 1 : 0,
                            name: $(nowElement[i].childNodes[1])[0].textContent
                        })
                    }
                }
                //todo  保存到 设备分栏
                console.log('删除前需要保存的数据', objData)

                for (let i = 0; i < objData.length; i++) {
                    let seachImg = objData[i]['status'] == 1 ? `img/on.png` : `img/off.png`
                    let onAndOff = objData[i]['status'] == 1 ? 'on' : 'off'
                    let isRun = objData[i]['status'] == '1' ? '运行中' : '已关机'
                    let id = objData[i].id
                    let objname = objData[i].name
                    let item1 = `<div class="imgbox" data-id="` + id + `">` +
                        `<img class="imgbox-img" src="` + seachImg + `" alt="" >` +
                        ` <div class="status ` + onAndOff + `"><div class="circle"></div>` + isRun + `</div></div>` +
                        `<div class="list_name" data-id="` + id + `">` + objname + `</div> </div>`
                    let haveDom = item1
                    let str = `<div class="item" data-parent="` + name + `">` + haveDom + `</div>`
                    let $item = $(str)
                    //添加element
                    $('.deviceBox').append($item)
                }
                //移除dom
                $(element[0].parentNode).remove()
                listenDerviceMouseChaneg()
            }
            //从新监听设备栏目 鼠标事件
            listenDerviceMouseChaneg = function () {
                //设备右击删除
                //阻止浏览器默认右键点击事件
                $(".m_content .deviceBox .item").bind("contextmenu", function () {
                    return false;
                })
                $(".m_content .deviceBox .item").mousedown(function (e) {
                    console.log(e.which);
                    //右键为3
                    if (3 == e.which) {
                        $(this).css({
                            "width": "-=2px"
                        });
                    }
                })
            }
            //初始化 设备右键事件
            listenDerviceMouseChaneg()
            //创建设备
            var Ealt = new Eject()

            //主界面 自定义事件点击方法
            //1. 创建分组
            group_Add = function (e) {
                console.log('点击创建分组')
                Ealt.Econfirm({
                    title: '新建分组',
                    btn1: '创建',
                    btn2: '取消',
                    message: `  <div class="groupFrom">
                            <div class="from-item">
                                <span class="tip">行：</span>
                                <input type="number" id="row">
                            </div>
                            <div class="from-item">
                                <span class="tip">列：</span>
                                <input type="number" id="column">
                            </div>
                            <div class="from-item">
                                <span class="tip">上：</span>
                                <input type="number" id="left">
                            </div>
                            <div class="from-item">
                                <span class="tip">左：</span>
                                <input type="number" id="top">
                            </div>
                        </div>
                       `,
                    define: function () {
                        group_Add_Create()
                    },
                    cancel: function () {

                    }
                })
            }
            //2.修改分组   判断有无设备 有设备提示移除设备在修改  无设备弹窗可修改
            group_Edit = function (groupName) {
                console.log('修改分组 name=', groupName)
                let domList = $('.block .parent')
                let element;
                for (let i = 0; i < domList.length; i++) {
                    if (domList[i].dataset.action == groupName) {
                        console.log('当前符合的数据=', $(domList[i].parentNode))
                        element = domList[i]
                    }
                }
                //查看有无包含设备
                let include = groupIncludeDevice($(element))
                if (include) {
                    console.log('查看有包含设备')
                    Ealt.Ealert({
                        title: '分组修改提示',
                        message: '分组中有包含设备，请先移除设备'
                    })
                } else {
                    console.log('查看无包含设备')
                    let domList = $('.block .parent')
                    for (let i = 0; i < domList.length; i++) {
                        if (domList[i].dataset.action == groupName) {
                            console.log('当前符合的数据=', $(domList[i].parentNode))
                            console.log('需求参数', domList[i].dataset.row, domList[i].dataset.column)
                            $(domList[i].parentNode).remove()
                            Ealt.Econfirm({
                                title: '分组修改2',
                                btn1: '修改',
                                btn2: '取消',
                                message: '<div class="groupFrom">\n' +
                                    '                            <div class="from-item">\n' +
                                    '                                <span class="tip">行：</span>\n' +
                                    '                                <input type="number" id="row" value="' + domList[i].dataset.row + '">\n' +
                                    '                            </div>\n' +
                                    '                            <div class="from-item">\n' +
                                    '                                <span class="tip">列：</span>\n' +
                                    '                                <input type="number" id="column" value="' + domList[i].dataset.column + '">\n' +
                                    '                            </div>\n' +
                                    '                            <div class="from-item">\n' +
                                    '                                <span class="tip">上：</span>\n' +
                                    '                                <input disabled type="number" id="left" value="200">\n' +
                                    '                            </div>\n' +
                                    '                            <div class="from-item">\n' +
                                    '                                <span class="tip">左：</span>\n' +
                                    '                                <input disabled type="number" id="top" value="200">\n' +
                                    '                            </div>\n' +
                                    '                        </div>',
                                define: function () {
                                    group_Add_Create()
                                    // $(".createBtn").trigger('click');//模拟点击
                                },
                                cancel: function () {
                                }
                            })
                        }
                    }
                }
            }
            //3. 分组详情
            group_Detail = function (groupName) {
                let domList = $('.block .parent')
                for (let i = 0; i < domList.length; i++) {
                    if (domList[i].dataset.action == groupName) {
                        console.log('当前符合的数据=', $(domList[i].parentNode))
                        console.log('需求参数', domList[i].dataset.row, domList[i].dataset.column)
                        Ealt.Econfirm({
                            title: '分组详情',
                            btn1: '确定',
                            message: '<div class="groupFrom">\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">行：</span>\n' +
                                '                                <input disabled type="number" id="row" value="' + domList[i].dataset.row + '">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">列：</span>\n' +
                                '                                <input disabled type="number" id="column" value="' + domList[i].dataset.column + '">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">上：</span>\n' +
                                '                                <input disabled type="number" id="left" value="200">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">左：</span>\n' +
                                '                                <input disabled type="number" id="top" value="200">\n' +
                                '                            </div>\n' +
                                '                        </div>',
                            define: function () {
                                //清空 弹窗组件
                                $('.qback').empty().remove()
                            },
                            cancel: function () {
                            }
                        })
                    }
                }
            }

            //创建 桌子
            group_Add_Create = function (){
                console.log('点击创建按钮')
                let row = Number($('#row').val())
                let column = Number($('#column').val())
                let top = Number($('#top').val())
                let left = Number($('#left').val())
                if (row > 30 || column > 30) {
                    alert('行列不可超过30')
                    return false
                }
                if (top < 0 || left < 0) {
                    alert('定位不可低于 0，0')
                    return false
                }
                let childList = []
                let obj = {
                    name: 'parent' + new Date().getTime(),
                    row: row,
                    column: column,
                    left: top,
                    top: left,
                    zIndex: 1,
                    isShow: false,
                    childList: []
                }
                let A_Z = 'ABCDEFGHIJKLMNOPKRSTUVWXYZ0123456789'
                let a_z = 'abcdefghijklmnopkrstuvwxyz0123456789'
                for (let i = 0; i < row; i++) {
                    for (let j = 0; j < column; j++) {
                        obj.childList.push({
                            position: A_Z[i] + '-' + a_z[j],
                            objData: {
                                id: '',
                            }
                        })
                    }

                }
                //赋值给监听的数据
                console.log('创建桌子的配置参数=', obj)
                addBox(obj)

            }

            //抽屉 设备操作
            //1.设备新增
            device_Add = function () {
                console.log('点击创建设备')
                Ealt.Econfirm({
                    title: '设备新增',
                    btn1: '创建',
                    btn2: '取消',
                    message: `  <div class="deviceFrom">
                            <div class="from-item">
                                <span class="tip">分析室：</span>
                                <input type="number" id="row">
                            </div>
                            <div class="from-item">
                                <span class="tip">终端编号：</span>
                                <input type="number" id="column">
                            </div>
                            <div class="from-item">
                                <span class="tip">操作系统：</span>
                                <input type="number" id="left">
                            </div>
                            <div class="from-item">
                                <span class="tip">芯片类型：</span>
                                <input type="number" id="top">
                            </div>
                            <div class="from-item">
                                <span class="tip">终端类型：</span>
                                <input type="number" id="top">
                            </div>
                            <div class="from-item">
                                <span class="tip">厂商：</span>
                                <input type="number" id="top">
                            </div>
                            <div class="from-item">
                                <span class="tip">型号：</span>
                                <input type="number" id="top">
                            </div>
                            <div class="from-item">
                                <span class="tip">网络类型：</span>
                                <input type="number" id="top">
                            </div>
                            <div class="from-item">
                                <span class="tip">本地IP：</span>
                                <input type="number" id="top">
                            </div>
                            <div class="from-item">
                                <span class="tip">CPU核数：</span>
                                <input type="number" id="top">
                            </div>
                            <div class="from-item">
                                <span class="tip">描述：</span>
                                <input type="number" id="top">
                            </div>
                        </div>
                       `,
                    define: function () {
                        let seachImg = `img/off.png`
                        let onAndOff = 'off'
                        let isRun = '已关机'
                        let id = new Date().getTime()
                        let objname = '新增设备001'
                        let item1 = `<div class="imgbox" data-id="` + id + `">` +
                            `<img class="imgbox-img" src="` + seachImg + `" alt="" >` +
                            ` <div class="status ` + onAndOff + `"><div class="circle"></div>` + isRun + `</div></div>` +
                            `<div class="list_name" data-id="` + id + `">` + objname + `</div> </div>`
                        let haveDom = item1
                        let str = `<div class="item" data-parent="` + name + `" data-id="` + id + `">` + haveDom + `</div>`
                        let $item = $(str)
                        //添加element
                        $('.deviceBox').append($item)
                        // addFun_right()
                        addFun()
                    },
                    cancel: function () {
                    }
                })
            }
            //2. 设备修改
            device_Edit = function (currentDevice) {
                // $.ajax({
                //     url: `${ctx}/analysisMonitor/terminalAnalysisRoomInfo/getTerminalDetailInfoById?terminalId=` + currentDevice,//要请求的服务器url
                //     async: true,//是否是异步请求
                //     cache: true,
                //     type: "GET",//请求方式
                //     dataType: "json",//服务器返回什么类型数据 text xml javascript json(javascript对象)
                //     success: function (result) {//函数会在服务器执行成功后执行，result就是服务器返回结果
                setTimeout(() => {
                    if (result2.code == '0') {
                        console.log('获取设备信息成功', result2)
                        popData.ip = result2.data.totalList.localIp
                        popData.memory = result2.data.totalList.memoryTotal
                        popData.memory_use = result2.data.totalList.memoryUsage
                        popData.disk = result2.data.totalList.diskTotal
                        popData.disk_use = result2.data.totalList.diskTotalUsed
                        popData.accept = result2.data.totalList.acceptTotalByte
                        popData.send = result2.data.totalList.sendTotalByte
                        popData.user = result2.data.totalList.issuere
                        popData.cpu = result2.data.totalList.cpuUseRatio
                        popData.diskTotalFree = result2.data.totalList.diskTotalFree
                        //设置弹窗参数
                        Ealt.Econfirm({
                            title: '设备修改',
                            btn1: '保存',
                            btn2: '取消',
                            message: '                         <div class="deviceFrom">\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">分析室：</span>\n' +
                                '                                <input type="text" id="row" value="' + '测试分析室名称' + '">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">终端编号：</span>\n' +
                                '                                <input type="text" id="column">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">操作系统：</span>\n' +
                                '                                <input type="text" id="left">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">芯片类型：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">终端类型：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">厂商：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">型号：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">网络类型：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">本地IP：</span>\n' +
                                '                                <input type="text" id="top" value="' + result2.data.totalList.localIp + '">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">CPU核数：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">描述：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                        </div>'
                            ,
                            define: function () {
                                let seachImg = `img/off.png`
                                let onAndOff = 'off'
                                let isRun = '已关机'
                                let id = new Date().getTime()
                                let objname = '新增设备001'
                                let item1 = `<div class="imgbox" data-id="` + id + `">` +
                                    `<img class="imgbox-img" src="` + seachImg + `" alt="" >` +
                                    ` <div class="status ` + onAndOff + `"><div class="circle"></div>` + isRun + `</div></div>` +
                                    `<div class="list_name" data-id="` + id + `">` + objname + `</div> </div>`
                                let haveDom = item1
                                let str = `<div class="item" data-parent="` + name + `" data-id="` + id + `">` + haveDom + `</div>`
                                let $item = $(str)
                                //添加element
                                $('.deviceBox').append($item)
                                addFun_right()
                            },
                            cancel: function () {
                            }
                        })
                    }
                }, 200)
                //     }
                // })


            }
            //3. 设备删除
            device_Del = function (currentDevice) {
                //查找 与 currentDevice对应的 设备
                let $item = $('.slider .deviceBox .item')
                console.log('当前抽屉中的设备 =', $item)
                for (let i = 0; i < $item.length; i++) {
                    if ($($item[i]).data('id') == currentDevice) {
                        console.log('这是符合的dom', $item[i])
                        $($item[i]).remove()
                    }
                }
            }
            //4. 设备详情
            device_Detail = function (currentDevice) {
                // $.ajax({
                //     url: `${ctx}/analysisMonitor/terminalAnalysisRoomInfo/getTerminalDetailInfoById?terminalId=` + currentDevice,//要请求的服务器url
                //     async: true,//是否是异步请求
                //     cache: true,
                //     type: "GET",//请求方式
                //     dataType: "json",//服务器返回什么类型数据 text xml javascript json(javascript对象)
                //     success: function (result) {//函数会在服务器执行成功后执行，result就是服务器返回结果
                setTimeout(() => {
                    if (result2.code == '0') {
                        console.log('获取设备信息成功', result2)
                        popData.ip = result2.data.totalList.localIp
                        popData.memory = result2.data.totalList.memoryTotal
                        popData.memory_use = result2.data.totalList.memoryUsage
                        popData.disk = result2.data.totalList.diskTotal
                        popData.disk_use = result2.data.totalList.diskTotalUsed
                        popData.accept = result2.data.totalList.acceptTotalByte
                        popData.send = result2.data.totalList.sendTotalByte
                        popData.user = result2.data.totalList.issuere
                        popData.cpu = result2.data.totalList.cpuUseRatio
                        popData.diskTotalFree = result2.data.totalList.diskTotalFree
                        //设置弹窗参数
                        Ealt.Econfirm({
                            title: '设备详情',
                            btn1: '确定',
                            message: '                         <div class="deviceFrom">\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">分析室：</span>\n' +
                                '                                <input type="text" id="row" value="' + '测试分析室名称' + '">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">终端编号：</span>\n' +
                                '                                <input type="text" id="column">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">操作系统：</span>\n' +
                                '                                <input type="text" id="left">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">芯片类型：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">终端类型：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">厂商：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">型号：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">网络类型：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">本地IP：</span>\n' +
                                '                                <input type="text" id="top" value="' + result2.data.totalList.localIp + '">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">CPU核数：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                            <div class="from-item">\n' +
                                '                                <span class="tip">描述：</span>\n' +
                                '                                <input type="text" id="top">\n' +
                                '                            </div>\n' +
                                '                        </div>'
                            ,
                            define: function () {
                                //清空 弹窗组件
                                $('.qback').empty().remove()
                            },
                            cancel: function () {
                            }
                        })
                    }
                }, 200)
                //     }
                // })
            }
        });
    })(jQuery);
</script>

</body>
</html>